<template>
  <div class="sign">
    <div class="sign-tab">
      <van-nav-bar left-arrow @click-left="$router.push('/')" :border="false">
        <span class="headline" slot="title">代签文件.PDF</span>
      </van-nav-bar>
      <span class="company">1111{{ title }}</span>
    </div>
    <!-- 合同模块 -->
    <my-contract
      id="infoContract"
      :fraglmg="preview"
      v-if="previewNumShow"
    ></my-contract>
    <!-- 底部按钮 -->
    <div class="sign-button">
      <van-button plain type="info" @click="$router.push('/layout')"
        >拒绝签署</van-button
      >
      <van-button type="info" @click="$router.push('/sth')"
        >立即签署</van-button
      >
    </div>
    <!-- 弹出层 -->
    <van-popup v-model="show" closeable round>
      <div class="mail">
        <img class="mailImg" src="../../assets/信封.png" alt="" />
        <span>您有一份电子文件待签署,请仔细阅读待签文件内容</span>
        <van-button type="default" @click="show = false">立即查看</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import MyContract from '../../components/contract'
import { addContractTacitly } from '@/api/contract'
export default {
  data() {
    return {
      show: true,
      // 合同
      list: {},
      title: '',
      // 预览合同数据
      preview: {
        // 合同ID
        contractId: '',
        // 文件ID
        fileId: '',
        // 总页数
        filePages: ''
      },
      previewNumShow: false
    }
  },
  created() {
    this.info()
  },
  mounted() {},
  methods: {
    async info() {
      console.log(this.$route.query.contract, '收到item')
      try {
        const { data: res } = await addContractTacitly(
          this.$route.query.contract.contractId
        )
        if (res.code === '0') this.$toast.success('数据获取成功')
        this.list = res.data
        // 合同标题
        this.title = this.list.contractBaseInfo.title
        // 预览数据
        this.preview.contractId = this.list.contractBaseInfo.contractId
        this.preview.fileId = this.list.signingFileInfoList[0].fileId
        this.preview.filePages = this.list.signingFileInfoList[0].filePages
        this.previewNumShow = true
      } catch (error) {
        this.$toast.error('数据获取失败')
      }
    }
  },
  components: {
    MyContract
  }
}
</script>

<style scoped lang="less">
.sign {
  padding: 168px 0 120px;
  .sign-tab {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 33;
    .van-nav-bar {
      .headline {
        font-size: 34px;
        font-weight: bold;
      }
      /deep/.van-icon {
        font-size: 40px;
        color: #101010;
      }
    }
    /deep/.van-nav-bar__left {
      padding-left: 23px;
    }
    .company {
      font-size: 26px;
      display: block;
      height: 80px;
      line-height: 80px;
      padding-left: 41px;
      border-bottom: 1px solid #e0e0e0;
      color: #2c2c2c;
      background-color: #fff;
    }
  }

  // 按钮
  .sign-button {
    height: 120px;
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .van-button {
      width: 321px;
      height: 81px;
    }
  }
  .mail {
    width: 560px;
    height: 431px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .mailImg {
      height: 130px;
      margin-top: 40px;
      overflow: hidden;
    }
    span {
      display: block;
      font-size: 28px;
      padding: 0 69px;
    }
    .van-button {
      width: 100%;
      color: #3994f3;
    }
  }
}
</style>
